<template>
	<view style="padding: 0 20rpx;">
		 <u--form labelPosition="left" :model="model" :rules="rules" ref="form1" labelWidth='80' errorType="toast">
		 		<u-form-item label="姓名" prop="userInfo.consignee" borderBottom ref="item1">
		 			<u--input v-model="model.userInfo.consignee"placeholder="请输入姓名" border="none"></u--input>
		 		</u-form-item>
		 		<u-form-item label="手机号" prop="userInfo.mobile" borderBottom ref="item1">
		 			<u--input v-model="model.userInfo.mobile" placeholder="请输入手机号" border="none"></u--input>
		 		</u-form-item>
		 		<u-form-item label="区域" prop="userInfo.area" borderBottom ref="item1" @click='ismask = true'>
		 			<u--input v-model="model.userInfo.area" disabled disabledColor="$bg-color" placeholder="请输入省市区街道" border="none"></u--input>
		 		</u-form-item>
		 		<u-form-item label="详细地址" prop="userInfo.address" borderBottom ref="item1">
		 			<u--input v-model="model.userInfo.address"  placeholder="请输入详细地址" border="none"></u--input>
		 		</u-form-item>
		 		
		 	</u--form>
		 	<button class='submites fixBtn' @click="btnSubmit">确定</button>
		 	<!-- 选择所在区域组件 -->
		 	<choose-address :ismask="ismask" @transRegionInfo="transRegionInfo" @closePupop="closePupop"></choose-address>
		 
	</view>
</template>

<script>
	import {getAddressApi} from '@/config/goodApi.js'
	export default {
		data() {
			return {
				model: {
					userInfo: {
						consignee:'',
						mobile:'',
						area:'',
						address:''
					},
				},
				rules: {
					'userInfo.consignee': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'userInfo.areaAddress': {
						type: 'string',
						required: true,
						message: '请选择区域',
						trigger: ['blur', 'change']
					},
					'userInfo.address': {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['blur', 'change']
					},
					
				},
				ismask:false
			};
		},
		methods:{
			closePupop(val) {
				this.ismask = val;
			},
			transRegionInfo(val) {
				console.log(val)
				this.reginInfo = val;
				this.ismask = this.reginInfo.ismask;
				this.model.userInfo.area = this.reginInfo.result;
				this.model.userInfo.provinceId = val.provinceId;
				this.model.userInfo.cityId = val.cityId;
				this.model.userInfo.districtId = val.districtId;
				this.model.userInfo.townId = val.townId;
			},
			btnSubmit() {
			     this.$refs.form1.validate().then(res => {
					if(!uni.$u.test.mobile(this.model.userInfo.mobile)){
						 uni.$u.toast('请输入正确手机号')
						 return
					}
					 let data ={
						 ...this.model.userInfo
					 }
					  getAddressApi(data).then(res=>{
						  uni.$u.toast('添加成功')
						  uni.navigateBack({
						  	delta:1
						  })
					  })
						
					}).catch(errors => {
						// uni.$u.toast('校验失败')
				 })
			},
		}
		
	}
</script>

<style lang="scss">

</style>
